<template>
  <view class="dynamic">
    <view class="user__container">
      <view class="user__header-warp">
        <!-- 头像组 -->
        <view class="user__header" @click.stop="clickUser()">
          <image class="user__header-image" :src="avatar || '/static/images/comment/default_user.png'" mode="aspectFill"></image>
        </view>
      </view>
      <view class="user__content">
        <view class="user__content-main">
          <!-- 名字 -->
          <text
            class="user__content-title uni-ellipsis text-[#3d3d3d] fw-700 text-28rpx"
            @click.stop="clickUser()"
          >
            {{ name }}
          </text>
          <!-- 发布内容 -->
          <text class="text-[#3d3d3d] break-all fw-700 text-28rpx my-12rpx" @click="clickDynamic()">
            {{ content }}
          </text>
          <!-- 图片 -->
          <view v-if="imgList && imgList.length > 0" @click.stop="clickImages()">
            <view
              class="imgList"
              :class="[
                imgList.length > 2
                  ? 'grid-cols-3fr h-200rpx'
                  : imgList.length === 2
                    ? 'grid-cols-2fr h-300rpx'
                    : 'grid-cols-1fr h-300rpx',
              ]"
            >
              <view class="images" v-for="(item, index) in imgList" :key="index">
                <wd-img :src="item" :enable-preview="true" class="w-full h-full" />
              </view>
            </view>
          </view>
          <!-- 发布时间 -->
          <view class="user__content-note uni-ellipsis text-[#999]">
            <text>{{ timestampFormat(publishTime) }}</text>
            <wd-icon
              v-if="propsUserId === userId"
              name="delete-thin"
              size="22rpx"
              color="#3670F7"
              class="ml-12rpx"
              @click.stop="handleDel()"
            ></wd-icon>
          </view>
          <view
            class="chooseTheme"
            :style="{
              width: `${themeNameWidth(themeName)}`,
            }"
            v-if="themeName"
          >
            #{{ themeName }}
          </view>
        </view>
      </view>
    </view>

    <view class="operate" :style="'width: 100%; display:' + operateDisplay">
      <!-- 评论 -->
      <view @click.stop="clickChat()" class="item">
        <!-- <uni-icons type="chat" size="36rpx" style="color: gray"></uni-icons> -->
        <wd-img
          :src="`/static/images/comment/comment.png`"
          width="36rpx"
          height="36rpx"
          mode="scaleToFill"
        />
        <text class="ml-6rpx">评论（{{ chatNumber }}）</text>
      </view>
      <!-- 点赞 -->
      <view @click.stop="clickThumbsup()" class="item">
        <!-- <wd-icon
          name="thumb-up"
          size="36rpx"
          :style="`color: ${isLike ? '#3670F7' : '#333333'}`"
        ></wd-icon> -->
        <wd-img
          :src="`/static/images/comment/like-${isLike}.png`"
          width="36rpx"
          height="36rpx"
          mode="scaleToFill"
        />
        <text class="ml-6rpx">点赞（{{ likeNumber }}）</text>
      </view>
    </view>
  </view>
</template>

<script>
import { useUserStore } from '@/store'
export default {
  props: {
    /* 主题名称 */
    themeName: {
      type: String,
    },
    avatar: {
      type: String,
    },
    propsUserId: {
      type: [Number, String],
    },
    name: {
      type: String,
    },
    publishTime: {
      type: [Number, String],
    },
    isFocusOn: {
      type: Boolean,
    },
    content: {
      type: String,
    },
    imgList: {
      type: Array,
    },
    isLike: {
      type: Boolean,
    },
    isGiveReward: {
      type: Boolean,
    },
    likeNumber: {
      type: Number,
    },
    giveRewardNumber: {
      type: Number,
    },
    chatNumber: {
      type: Number,
    },
    userNoShow: {
      type: Boolean,
    },
    operateNoShow: {
      type: Boolean,
    },
  },
  data() {
    return {
      windowWidth: 0, //屏幕可用宽度
      windowHeight: 0, //屏幕可用高度
      imgWidth: 0, //图片宽度
      imgHeight: 0, //图片高度
      thumbsupColor: '#333333',
      heartColor: '#333333',
      userDisplay: 'block',
      operateDisplay: 'block',
      userId: '', // 真实用户id
    }
  },
  mounted() {
    const userStore = useUserStore()
    this.userId = userStore.userInfo?.userId
    const res = uni.getSystemInfoSync()
    this.windowHeight = res.windowHeight
    this.windowWidth = res.windowWidth

    if (this.userNoShow) {
      this.userDisplay = 'none'
    }
    console.log(this.operateNoShow)
    if (this.operateNoShow) {
      this.operateDisplay = 'none'
    }

    this.judgeImg()
    this.initOperate()
  },
  methods: {
    /* 控制主题的展示 */
    themeNameWidth(themeName) {
      let num = 0
      for (let char of themeName) {
        if (/[a-zA-Z0-9]/.test(char)) {
          num += 14
        } else {
          num += 25
        }
      }
      return `${num + 32}rpx`
    },
    /* 删除此动态 */
    handleDel() {
      this.$emit('clickDel')
    },
    // 预览图片
    previewImg(urls) {
      if (urls) {
        uni.previewImage({
          urls,
          longPressActions: {
            itemList: ['保存图片'],
          },
        })
      }
    },
    initOperate() {
      this.thumbsupColor = this.isLike ? '#3670F7' : '#333333'
      this.heartColor = this.isGiveReward ? '#fb5f5f' : '#333333'
    },
    // 自适应判断
    judgeImg() {
      if (this.imgList) {
        if (this.imgList.length == 1) {
          this.imgWidth = (this.windowWidth * 2) / 3
          this.imgHeight = (this.windowHeight * 3) / 5
        } else if (this.imgList.length == 4) {
          this.imgWidth = this.windowWidth / 3.3
          this.imgHeight = this.imgWidth
        } else {
          this.imgWidth = this.windowWidth / 3.4
          this.imgHeight = this.imgWidth
        }
      }
    },
    timestampFormat(dateStr) {
      const timestamp = new Date(dateStr).getTime() / 1000
      if (isNaN(timestamp)) return '刚刚'
      function zeroize(num) {
        return (String(num).length == 1 ? '0' : '') + num
      }

      let curTimestamp = parseInt(new Date().getTime() / 1000) //当前时间戳
      let timestampDiff = curTimestamp - timestamp // 参数时间戳与当前时间戳相差秒数

      let curDate = new Date(curTimestamp * 1000) // 当前时间日期对象
      let tmDate = new Date(timestamp * 1000) // 参数时间戳转换成的日期对象

      let Y = tmDate.getFullYear(),
        m = tmDate.getMonth() + 1,
        d = tmDate.getDate()
      let H = tmDate.getHours(),
        i = tmDate.getMinutes(),
        s = tmDate.getSeconds()
      if (timestampDiff < 60) {
        // 一分钟以内
        return '刚刚'
      } else if (timestampDiff < 3600) {
        // 一小时前之内
        return Math.floor(timestampDiff / 60) + '分钟前'
      } else if (
        curDate.getFullYear() == Y &&
        curDate.getMonth() + 1 == m &&
        curDate.getDate() == d
      ) {
        return '今天' + zeroize(H) + ':' + zeroize(i)
      } else {
        let newDate = new Date((curTimestamp - 86400) * 1000) // 参数中的时间戳加一天转换成的日期对象
        if (newDate.getFullYear() == Y && newDate.getMonth() + 1 == m && newDate.getDate() == d) {
          return '昨天' + zeroize(H) + ':' + zeroize(i)
        } else if (curDate.getFullYear() == Y) {
          return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i)
        } else {
          return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i)
        }
      }
    },
    /** 触发父级事件 */
    // 点击动态
    clickDynamic() {
      this.$emit('clickDynamic')
    },
    // 点击用户信息
    clickUser() {
      this.$emit('clickUser')
    },
    // 点击关注
    clickFocus() {
      this.$emit('clickFocus')
    },
    // 点赞
    clickThumbsup() {
      this.$emit('clickThumbsup')
      this.initOperate()
    },
    // 点击打赏
    clickGiveReward() {
      this.$emit('clickGiveReward')
    },
    // 点击聊天
    clickChat() {
      this.$emit('clickChat')
    },
    clickImages() {},
  },
}
</script>

<style lang="scss" scoped>
/* 选中主题 */
.chooseTheme {
  display: inline-block;
  margin-top: 20rpx;
  padding: 0 12rpx 0 20rpx;
  font-size: 26rpx;
  color: #3670f7;
  border: solid 1rpx #3670f7;
  border-radius: 10rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 想法图片排列样式 */
.uni-list-chat__content-extra-text {
  color: #007aff;
}
.dynamic {
  width: 100%;
}
.imgList {
  display: grid;
  gap: 10rpx;
  margin: 12rpx 0;
}
.grid-cols-3fr {
  grid-template-columns: 1fr 1fr 1fr;
}
.grid-cols-2fr {
  grid-template-columns: 1fr 1fr;
}
.grid-cols-1fr {
  grid-template-columns: 1fr;
}
.operate {
  margin: 20rpx 0 20rpx 0;
  height: 100rpx;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  border-top: 1rpx solid #e6e6e6;

  .item {
    font-size: 30rpx;
    font-weight: 700;
    color: #3d3d3d;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1rpx solid #e6e6e6;
  }

  .item:nth-of-type(2) {
    border-right: 0;
  }
}
.chat-custom-right {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.chat-custom-text {
  font-size: 12rpx;
  color: #999;
}
.bottom-line {
  border-bottom: 20rpx solid #efefef;
}

.user__container {
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  /* -webkit-flex-direction: row; */
  flex-direction: row;
  -webkit-box-flex: 1;
  /* -webkit-flex: 1; */
  flex: 1;
  padding: 10rpx 15rpx;
  position: relative;
  overflow: hidden;
}
.user__header {
  display: flex;
  width: 80rpx;
  height: 80rpx;
  -webkit-border-radius: 100%;
  border-color: #eee;
  border-width: 1rpx;
  border-style: solid;
  overflow: hidden;
  border-radius: 100%;
}
.user__header-image {
  display: flex;
  align-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  flex-wrap: wrap-reverse;
  width: 80rpx;
  height: 80rpx;
  border-radius: 100%;
  border-color: #eee;
  border-width: 1rpx;
  border-style: solid;
  overflow: hidden;
}
.user__content {
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-flex: 1;
  flex: 1;
  overflow: hidden;
  padding: 2px 0;
}
.user__content-main {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding-left: 10px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
}
.user__content-note {
  color: #999;
  font-size: 20rpx;
  font-weight: normal;
  overflow: hidden;
}
.user__focus-on {
  padding: 3px 10px;
  border: 1px solid #fb5f5f;
  color: #fb5f5f;
  display: flex;
  font-size: 14px;
  border-radius: 3px;
}
.user__focus-off {
  padding: 3px;
  color: gray;
  font-size: 14px;
}
</style>
